<template>
  <view class="basin-basic-info">
    <view class="header">
      <view class="header-title">
        <text class="title-text">{{ headerName }}</text>
        <text class="code-tag">{{ headerCode }}</text>
      </view>
    </view>

    <view class="info-card">
      <view class="card-header">
        <text class="card-title">基础信息</text>
      </view>
      <view class="card-content base-grid">
        <view class="base-item">
          <text class="base-label">所在河流</text>
          <text class="base-value">{{ baseInfo.river || '--' }}</text>
        </view>
        <view class="base-item">
          <text class="base-label">水库规模</text>
          <text class="base-value">{{ baseInfo.scale || '--' }}</text>
        </view>
        <view class="base-item span-2">
          <text class="base-label">地址</text>
          <text class="base-value">{{ baseInfo.address || '--' }}</text>
        </view>
      </view>
    </view>

    <view class="info-card">
      <view class="card-header">
        <text class="card-title">特征参数</text>
      </view>
      <view class="card-content feature-grid">
        <view class="feature-item">
          <text class="feature-label">校核洪水位</text>
          <text class="feature-value">{{ toNumberText(features.check_flood_level) }} m</text>
        </view>
        <view class="feature-item">
          <text class="feature-label">设计洪水位</text>
          <text class="feature-value">{{ toNumberText(features.design_flood_level) }} m</text>
        </view>
        <view class="feature-item">
          <text class="feature-label">正常蓄水位</text>
          <text class="feature-value">{{ toNumberText(features.normal_high_level) }} m</text>
        </view>
        <view class="feature-item">
          <text class="feature-label">死水位</text>
          <text class="feature-value">{{ toNumberText(features.dead_water_level) }} m</text>
        </view>
        <view class="feature-item">
          <text class="feature-label">总库容</text>
          <text class="feature-value">{{ toNumberText(features.total_capacity) }} 10^6m³</text>
        </view>
        <view class="feature-item">
          <text class="feature-label">兴利库容</text>
          <text class="feature-value">{{ toNumberText(features.useful_capacity) }} 10^6m³</text>
        </view>
        <view class="feature-item">
          <text class="feature-label">死库容</text>
          <text class="feature-value">{{ toNumberText(features.dead_capacity) }} 10^6m³</text>
        </view>
      </view>
    </view>

    <view class="info-card">
      <view class="card-header">
        <text class="card-title">汛限水位</text>
      </view>
      <view class="card-content">
        <view class="limit-table">
          <view class="table-header">
            <text class="th">汛限类型</text>
            <text class="th">日期</text>
            <text class="th">汛限水位</text>
            <text class="th">汛限库容</text>
          </view>
          <view class="table-row" v-for="(row, idx) in limitLevels" :key="idx">
            <text class="td">{{ row.type || '--' }}</text>
            <text class="td">{{ row.period || '--' }}</text>
            <text class="td">{{ toNumberText(row.level) }}</text>
            <text class="td">{{ toNumberText(row.capacity) }}</text>
          </view>
          <view class="empty-row" v-if="!limitLevels || limitLevels.length === 0">
            <text class="empty-text">暂无汛限水位信息</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { API_BASE_URL } from '@/config/api.js'

const props = defineProps({
  basinCode: { type: String, required: true }
})

const headerName = ref('')
const headerCode = ref('')
const baseInfo = ref({ river: '', scale: '', address: '' })
const features = ref({
  check_flood_level: null,
  design_flood_level: null,
  normal_high_level: null,
  dead_water_level: null,
  total_capacity: null,
  useful_capacity: null,
  dead_capacity: null
})
const limitLevels = ref([])
const storageCurve = ref([])

const toNumberText = (v) => {
  if (v === null || v === undefined) return '--'
  const num = Number(v)
  return Number.isFinite(num) ? num.toString() : '--'
}

const fetchDetail = async () => {
  try {
    const res = await uni.request({
      url: `${API_BASE_URL}/api/get_basin_basic_data?basin=${props.basinCode}`,
      method: 'GET'
    })
    if (res.data && res.data.success) {
      const data = res.data.data || {}
      headerName.value = data.basic?.stnm || ''
      headerCode.value = data.basic?.stcd || ''
      baseInfo.value = {
        river: data.basic?.rvnm || '',
        scale: data.feature?.rsvrtp_type || '',
        address: data.basic?.stlc || ''
      }
      const ws = data.water_standards || {}
      features.value = {
        check_flood_level: data.feature?.ckflz ?? null,
        design_flood_level: data.feature?.dsflz ?? null,
        normal_high_level: data.feature?.normz ?? null,
        dead_water_level: data.feature?.ddz ?? null,
        total_capacity: data.feature?.ttcp ?? null,
        useful_capacity: data.feature?.actcp ?? null,
        dead_capacity: data.feature?.ddcp ?? null
      }
      limitLevels.value = Array.isArray(data.flood_limit_list) ? data.flood_limit_list.map(i => ({
        type: deriveFloodType(i.bgmd, i.edmd),
        period: formatPeriod(i.bgmd, i.edmd),
        level: i.fsltdz ?? null,
        capacity: i.fsltdw ?? null
      })) : []
      storageCurve.value = Array.isArray(data.storage_curve_list) ? data.storage_curve_list.map(i => ({
        rz: Number(i.rz),
        w: Number(i.w)
      })) : []
    }
  } catch (e) {}
}

onMounted(() => {
  fetchDetail()
})
</script>

<style scoped>
.basin-basic-info { background: #f5f7fa; min-height: 100vh; padding-bottom: 24rpx; }
.header { display: flex; align-items: center; padding: 20rpx; margin: 20rpx; border-radius: 16rpx; border: 1rpx solid #e8eaed; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08); background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: #fff; }
.header-title { display: flex; align-items: baseline; gap: 12rpx; }
.title-text { font-size: 36rpx; font-weight: 700; }
.code-tag { font-size: 24rpx; background: rgba(255,255,255,0.2); padding: 4rpx 8rpx; border-radius: 8rpx; }
.info-card { background: #ffffff; border-radius: 16rpx; box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.08); overflow: hidden; border: 1rpx solid #e8eaed; margin: 20rpx; }
.card-header { display: flex; justify-content: space-between; align-items: center; padding: 20rpx; border-bottom: 1rpx solid #f0f0f0; }
.card-title { font-size: 28rpx; font-weight: 600; color: #2c3e50; }
.card-content { padding: 20rpx; }
.base-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(40rpx, auto); gap: 16rpx; }
.base-item { display: flex; gap: 12rpx; align-items: baseline; }
.span-2 { grid-column: span 2; }
.base-label { font-size: 24rpx; color: #6c757d; min-width: 140rpx; }
.base-value { font-size: 26rpx; color: #2c3e50; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16rpx; }
.feature-item { display: flex; flex-direction: column; gap: 6rpx; }
.feature-label { font-size: 24rpx; color: #6c757d; }
.feature-value { font-size: 26rpx; color: #2c3e50; }
.limit-table { display: flex; flex-direction: column; gap: 8rpx; }
.table-header { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; background: #f8f9fa; padding: 16rpx; border-radius: 8rpx; }
.th { font-size: 24rpx; font-weight: 600; color: #2c3e50; text-align: center; }
.table-row { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; padding: 12rpx 16rpx; border-bottom: 1rpx solid #f0f0f0; }
.td { font-size: 24rpx; color: #495057; text-align: center; }
.empty-row { padding: 24rpx; text-align: center; color: #6c757d; }
.empty-text { font-size: 24rpx; }
</style>